<script>
import KtIcon from "/src/components/node-kantboot/components/KtIcon/KtIcon.vue";
import HtmlViewDialog from "./components/HtmlViewDialog.vue";

export default {
  components: {KtIcon,HtmlViewDialog},
  data() {
    return {
      contentLoading: false,
      requestParamBind: {
        messageTypeCode: "",
        to: "",
        subject: "",
        content: "",
      },
      requestParam: {
        data: {
          and: []
        },
        pageNumber: 1,
        pageSize: 100,
        sort: "gmtCreate",
        orderBy: "DESC"
      },
      bodyData: {
        content: [],
        number: 1,
        size: 5,
        totalElements: 1,
        totalPage: 1,
      },
      messageTypeCodeEnum: {
        notification: "通知",
        verification: "验证码",
        marketing: "营销推广",
        voice: "语音",
        logistics: "物流"
      }
    }
  },
  watch: {
    requestParamBind: {
      handler: function (val) {
        this.requestParam.data.and = [{
          field: "to",
          operatorCode: "vague",
          value: val.to
        }, {
          field: "content",
          operatorCode: "vague",
          value: val.content
        }, {
          field: "messageTypeCode",
          operatorCode: "eq",
          value: val.messageTypeCode
        },
          {
            field: "subject",
            operatorCode: "vague",
            value: val.subject
          }];
      },
      deep: true
    }
  },
  mounted() {
    this.getBodyData();
  },
  methods: {
    /**
     * 获取消息类型名称
     * @param code
     * @returns {*}
     */
    getMessageTypeName(code) {
      return this.messageTypeCodeEnum[code];
    },
    changePageSize(val) {
      this.requestParam.pageSize = val;
      this.getBodyData();
    },
    changePageNumber(val) {
      this.requestParam.pageNumber = val;
      this.getBodyData();
    },
    getBodyData() {
      this.contentLoading = true;
      this.$kt.requestSecurity.send({
        uri: "/functional-email-web/admin/email/getBodyData",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.bodyData = res.data;
          setTimeout(() => {
            this.contentLoading = false;
          }, 500);
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          setTimeout(() => {
            this.contentLoading = false;
          }, 500);
        }
      });
    },
    getHtml(item) {
      let html = item.content;
      // 如果不是html
      if (!item.isHtml) {
        // 将文字大小改为28px，因为做了全局缩小，所以这里要放大
        html = "<div style='font-size: 36px'>" + html + "</div>";
        return html;
      }

      // 修改滚动条样式
      html = html + "<style>::-webkit-scrollbar{width: 5px;height: 5px;}::-webkit-scrollbar-thumb{background-color: #666666;border-radius: 5px;}</style>";
      return html;
    }
  }
}

</script>

<template>
  <div class="box">
    <div style="text-align: left">
      <el-form
          :inline="true"
          :model="requestParamBind"
          label-position="left"
          @submit.native.prevent
      >
        <el-form-item label="类型">
          <el-select
              style="width: 150px"
              v-model="requestParamBind.messageTypeCode"
              @change="getBodyData"
              placeholder="请选择">
            <el-option
                label="全部"
                :value="''"
            ></el-option>
            <el-option
                v-for="(value, key) in messageTypeCodeEnum"
                :key="key"
                :label="value"
                :value="key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
              @keyup.enter.native="getBodyData"
              placeholder=""
              v-model="requestParamBind.to"></el-input>
        </el-form-item>

        <el-form-item label="主题">
          <el-input
              @keyup.enter.native="getBodyData"
              v-model="requestParamBind.subject"></el-input>
        </el-form-item>

        <el-form-item label="内容">
          <el-input
              @keyup.enter.native="getBodyData"
              v-model="requestParamBind.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              @click="getBodyData">查询/刷新
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-scrollbar
        v-loading="contentLoading"
        style="height: calc(100vh - 150px)">

      <div
          v-for="item in bodyData.content"
          class="box-box">
        <div class="card">
          <div style="text-align: left;padding-left: 5px;">
            <div class="dot"
                 :class="{
              'dot-success':item.messageStatusCode==='success',
              'dot-sending':item.messageStatusCode==='sending',
              'dot-fail':item.messageStatusCode==='fail'
            }"
            ></div>
            <span
                v-if="item.messageStatusCode==='success'"
                class="text-success">成功</span>
            <span
                v-if="item.messageStatusCode==='sending'">
              发送中
            </span>
            <span
                v-if="item.messageStatusCode==='fail'"
                class="message-status-fail-reason">{{ item.messageStatusFailReason }}</span>
          </div>
          <div style="padding: 0px 10px 0 10px;box-sizing: border-box;">
            <div style="text-align: center;font-size: 12px">主题：{{ item.subject }}</div>
            <div style="height: 5px"></div>
            <div style="text-align: center;font-size: 18px">{{ item.to }}</div>
          </div>

          <div style="padding: 10px">
            <div style="text-align: left">
              <span class="small-text">{{ $kt.date.format(item.gmtCreate, "yyyy-MM-dd hh:mm:ss") }}</span>
              <el-tag style="float: right">{{ getMessageTypeName(item.messageTypeCode) }}</el-tag>
            </div>
            <div style="height: 10px"></div>
              <div
                  class="box-content">
                <iframe
                    class="iframe"
                    :srcdoc="getHtml(item)"
                ></iframe>
                <!-- 遮盖 -->
                <div v-if="item.isHtml"
                     class="box-content-cover"
                >
                  <div class="to-view"
                  @click="$refs.htmlViewDialog.open(item)"
                  >
                    <kt-icon color="#fff" icon="el-icon-view" size="30px"></kt-icon>
                  </div>
                </div>
              </div>
            <div class="small-text">ID：{{ item.id }}</div>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <div style="height: 15px"></div>

    <!-- 分页 -->
    <el-pagination
        style="margin-left: 50%;transform: translateX(-50%)"
        :page-size="requestParam.pageSize"
        :current-page="requestParam.pageNumber"
        :page-sizes="[100, 200, 300, 400, 500,10000]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="bodyData.totalElements"
        @size-change="changePageSize"
        @current-change="changePageNumber"/>

  </div>

  <html-view-dialog ref="htmlViewDialog"></html-view-dialog>
</template>

<style lang="scss" scoped>
.box {
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.box-box {
  display: inline-block;
  margin: 20px;
  width: 300px;
}

.card {
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .1);
}

.box-content {
  position: relative;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  height: 320px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .1);

  .iframe {
    position: absolute;
    width: 200%;
    height: 640px;
    border: none;
    top: 0;
    left: 0;
    transform: scale(0.5) translate(-50%, -50%);
  }
}

.small-text {
  font-size: 12px;
  color: rgba(0, 0, 0, .5);
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #409EFF;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  margin-top: 5px;
}

.dot-success {
  background-color: #67C23A;
}

.dot-sending {
  background-color: #666666;
}

.dot-fail {
  background-color: #F56C6C;
}

.text-success {
  font-size: 12px;
  color: #67C23A;
}

.text-fail {
  font-size: 12px;
  color: #F56C6C;
}

.message-status-fail-reason {
  font-size: 12px;
  color: #F56C6C;
}

.box-content-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, .4);
  opacity: 0;
}

.box-content-cover:hover {
  opacity: 1;
  // 动画
  transition: opacity0to1 2s;
}

@keyframes opacity0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.to-view {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 55%;
  opacity: .6;
  cursor: pointer;
}

.to-view:hover {
  opacity: 1;
  background-color: rgba(0,0,0,.3);
}

.to-view:active {
  transform: translate(-50%, -50%) scale(.95);
}

</style>